/*
 * @Title: 申诉模块
 * @Created by: gsjPC 
 */
<template>
	<view class="shensuBody" >
		<comHeader :config="navConfig"/>
		<view style="width: 100%;height: 120upx;background: #FFFFFF;"></view>
		<view class="shensu-body">
			<view class="headIcon"><image src="/static/lvyLogo.png"></image></view>
			<view class="list">
				<view class="item" v-for="(item,index) in listData" :key='index'>
					<view class="dot"></view>
					<text>{{item}}</text>
				</view>
			</view>
		</view>
		<view class="xy">
			<view class="choose">
				<image src="/static/duihao.png" mode=""></image>
			</view>
			<text class="xy-text">同意</text>
			<text class="xy-url">##协议</text>
		</view>
		<view class="nextStep" @tap="nextStep">开始申诉</view>
		<text class="checkJd">查看申诉进度</text>
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				navConfig:{
					isFixed:false,
					left:{
						text:'',  
						isShowLeft:true,
						leftGobackColor:'black',
						leftTextColor:'black',
					},
					mid:{
						isShowMid:true,
						text:'申诉找回账号密码'
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				listData:[
					'申诉适用范围：不能通过绑定的手机/邮箱/账号登陆，及忘记密码的 用户',
					'申诉过程会发送验证码至可用手机号，并设置新密码',
					'申诉成功后可返回直接登陆'
				]
			}
		},
		methods:{
			nextStep(){
				uni.navigateTo({
					url:'/pages/login/shenSu2'
				})
			}
		}
	}
</script>

<style>
	.shensuBody{
		background: rgba(246,246,246,1.00);
		top: 0;
		width: 100%;
		overflow: hidden;
		height: 100vh;
		
	}
	.nextStep{
		width: 612upx;
		margin-left: auto;
		margin-right: auto;
			height: 88upx;
			line-height: 88upx;
			border-radius:88upx;
			font-size: 28upx;
			background: linear-gradient(left,#54AAFF,#568FFF);
			text-align: center;
			color: #ffffff;
			margin-top:110upx;
	}
	.shensu-body{
		width: 750upx;
		height: auto;
		display: table;
		background: #FFFFFF;
		border-top: rgba(246,246,246,1.00) solid 15upx;
		/* margin-top: 140upx; */
	}
	.headIcon{
		width: 120upx;
		height: 120upx;
		margin-left: 315upx;
		margin-right: 315upx;
		border-radius: 30upx;
		margin-top: 80upx;
		background: rgba(84,166,255,1.00);
	}
	.headIcon image{
		width:120upx;
		height: 120upx;
	}
	.list{
		width: 100%;
		height: auto;
		margin-top: 60upx;
		display: table;
	}
	.item{
		width: 100%;
		height: auto;
		display: table;
	}
	.dot{
		width: 10upx;
		height: 10upx;
		border-radius: 50%;
		margin-top: 15upx;
		background: rgba(205,205,205,1.00);
		float: left;
		margin-left: 29upx;
	}
	.item text{
		width: 658upx;
		display: block;
		margin-bottom: 24upx;
		color: rgba(205,205,205,1.00);
		font-size: 28upx;
		margin-left: 12upx;
		float: left;
	}
	.xy{
		margin-top: 34upx;
		width: 100%;
		height: 80upx;
	}
	.choose{
		width: 27upx;
		height: 27upx;
		background: #FFFFFF;
		border-radius: 10upx;
		float: left;
		margin-top: 4upx;
		position: relative;
		margin-left: 25upx;
	}
	.choose image{
		width: 27upx;
		height: 27upx;
		position: absolute;
	}
	.xy-text{
		font-size: 26upx;
		color: rgba(153,153,153,1.00);
		float: left;
		margin-left: 35upx;
	}
	.xy-url{
		font-size: 26upx;
		color: rgba(40,77,145,1.00);
		float: left;
	}
	.checkJd{
		width: 100%;
		height: 60upx;
		display: block;
		font-size: 28upx;
		text-align: center;
		margin-top: 30upx;
		color: rgba(84,154,255,1.00);
		line-height: 60upx;
	}
</style>
